<template>
    <div class="import">
      <el-dialog title="客户导入" :visible.sync="visible" width="550px" :close-on-click-modal="false" :before-close="closeDialog">
            <div style="display: flex;align-items: center;margin-bottom: 10px;margin-left: 20px">
              <span class="label">下载模板</span>
              <el-button type="text" @click="downProduct">客户模板.xlsx</el-button>
            </div>
            <div style="display: flex;align-items: center;margin-bottom: 10px; margin-left: 20px">
              <span class="label">按照模板导入客户</span>
              <el-button type="primary" size="mini" @click="exportCust">导入客户</el-button>
              <span style="margin-left: 10px">{{fileName}}</span>
            </div>
            <input type="file" @change="upload" ref="fileTarget" size="small" style="display: none" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">

        <p style="margin-left: 20px; font-weight: 600;line-height: 30px">注：客户导入将在后台进行，导入结果可以在客户设置>客户导入中查看</p>

        <p class="message" style="margin-left: 20px;">提示：（请先下载对应的模板文件，修改完成后，再上传修改好的模板文件。若表中有客户名称重复，系统会自动合并这些重复的信息）</p>
        <input type="file" @change="upload" ref="fileTarget" size="small" style="display: none" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">

        <!--  导入通知   -->

        <div slot="footer" class="dialog-footer" align="right">
          <el-button size="mini" @click="closeDialog">取 消</el-button>
          <el-button size="mini" type="primary" @click="submit" :loading="loading">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    import {queryCustType, importCust} from '@/api/customer' // 查询客户分组
    import {getToken} from '@/util/auth'// token引入
    import website from '@/config/website';
    import {Base64} from 'js-base64';
    import {exportCust} from '@/api/customer'
    import {downTemplate} from '@/util/util'
    export default {
        name: "dialogTmport",
        computed: {
            headers() {
                return {
                    'Authorization': `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`,
                    'Blade-Auth': 'bearer ' + getToken()
                }
            }
        },
        data() {
            return {
                visible:false,
                options:[],
                props:{
                    value:'id',
                    label:'text',
                    children:'children'
                },
                result:{},
                fileName:'',
                loading:false,
                type:'',
                errMessage:''
            }
        },
        created() {
            queryCustType().then((res) => { // 客户分类
                if (res.data.success) {
                    this.options = res.data.data
                }
            })
        },
        methods: {
            init() {
                this.visible = true
            },
            exportCust() {
              this.$refs.fileTarget.click()
            },
            upload() {
                let inputDOM = this.$refs.fileTarget;
                let result = inputDOM.files[0];
                if(result.size / 1024 / 1024 < 5) {
                    this.result = result
                    this.fileName = inputDOM.files[0].name
                } else {
                    this.$message({
                        type:'warning',
                        message:'表格大小请控制在 5M 以内'
                    })
                }
            },
            downProduct() { // 下载模板
                exportCust().then(res => {
                    downTemplate(res.data, "客户模板.xlsx")
                })
            },
            submit() {
                let formData = new FormData();
                formData.append("file", this.result);
                if(this.fileName == '') {
                    this.$message({
                        type:'warning',
                        message:'请上传客户列表'
                    })
                    return;
                }
                this.loading = true
                importCust(formData).then(res => {
                    this.loading = false
                    this.visible = false
                    if(res.data.code == 200) { // 导入成功
                      this.$message({
                          message:res.data.msg,
                          type:'success'
                      })
                        this.$emit('updateCust')
                        this.bus.$emit('updataCustMenu')
                    }
                })
                this.loading = false
                this.visible = false
                this.fileName = ''
                let inputDOM = this.$refs.fileTarget;
                inputDOM.value = null
            },
            closeDialog() {
                this.visible = false
                this.fileName = ''
                let inputDOM = this.$refs.fileTarget;
                inputDOM.value = null
            },
            toList() {
                this.$router.push('/customer/admin/3')
            }
        }
    }
</script>

<style scoped lang="scss">
  .import {
     font-size: 13px;
    .el-dialog__title {
      font-size: 17px;
    }

    ul {
      display: flex;
      justify-content: space-around;
      margin: 10px 0 !important;
    }
    .message {
      font-size: 12px;
      color: #666;
      line-height: 30px;
    }
    .label{
     flex: 0 0 120px;
    }
  }
</style>
